<template>
  <div>
    <el-dialog :title="typeName+'详情'" :visible.sync="showDialog_" custom-class='dialog_right MkSiteDetail' top="0%" @close='closeDialog("addForm")' @open='openDialog'>
      <div class="operationBtnInRightDialog">
          <span class='infoIcon'  @click="editSite"><i class="el-icon-edit"></i> 编辑</span>
      </div>
      <el-form  label-width="90px">
        <el-form-item  :label="typeName+'名称'">
          {{currentObj.name}}
        </el-form-item>
        <el-form-item label="是否显示">
          {{currentObj.status == 'ENABLE'?'是' : '否'}}
        </el-form-item>
        <el-form-item label="关联的客户">
         <div style="word-break: break-all;line-height: 25px;margin-top:5px;">{{currentObj.bindingCompany}}</div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--编辑-->
    <mk-add-site :showDialog='dialogVisible_edit'  v-on:closeDialog='closeDialog_edit' :currentObj="currentObj"></mk-add-site>
  </div>
</template>

<script>
  import MkAddSite from './MkAddSite.vue'
export default {
  name: 'MkSiteDetail',
  components: {
    MkAddSite
  },
  props: ['showDialog','currentObj'],
  methods: {
    editSite() {
      if(this.currentObj.siteLevel == 'COUNTRY'){
          this.$message.warning('该项不能修改');
          return;
      }
      this.dialogVisible_edit = true;
    },
    closeDialog_edit(type) {
        this.isRefresh = type;
        this.dialogVisible_edit = false;
        this.showDialog_ = false;
    },
    closeDialog() {
      this.$emit('closeDialog',this.isRefresh);
    },
    openDialog() {
      this.isRefresh=false;
      if(this.currentObj.siteLevel == 'AREA' || this.currentObj.siteLevel == 'COUNTRY'){
        this.typeName = '地区';
      }else if(this.currentObj.siteLevel == 'SITE') {
        this.typeName = '站点';
      }
    },
  },
  watch: {
    showDialog: function(value) {
      this.showDialog_ = value;
    }
  },
  data () {
    return {
      typeName: '',
      dialogVisible_edit: false,
      imageDialogVisible: false,
      imageViewUrl:'',
      isRefresh: false,
      showDialog_: this.showDialog,
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
  .MkSiteDetail{
  .el-form-item{
    margin-bottom:10px;
  }

  }
</style>
